<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/details.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/iconfont-2.css">
    <link rel="stylesheet" href="./css/iconfont-3.css">
</head>
<script src="./jquery.js"></script>
<script src="ajax-promise.js"></script>
<body>
    <div class="head1">
        <div class="he">
            <ul class="he2">
                <li>
                    <div class="welcome">
                        <p>欢迎<mark><em class="username"></em></mark>进入本站&nbsp;&nbsp;&nbsp;<span class="logout">注销</span></p>
                    </div>
                </li>
                <li></li>
                <li><a href="./logon.html" class="dl">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;</li>
                <li>&nbsp;<a href="./regst.html" class="zc">免费注册</a>&nbsp;</li>
                <li>&nbsp;<a href="">关于我们<span class="iconfont2 icon-jiantou1"></span></a></span></li>
                <li>&nbsp;<a href="">下载APP<span class="iconfont2 icon-jiantou1"></span></a>&nbsp;</li>
                <li>&nbsp;<a href="">帮助中心</a>&nbsp;</li>
                <li>&nbsp;<a href=""><span class="iconfont2 icon-xin"></span>收藏</a></li>
            </ul>
        </div>
    </div>


    <div class="head2">
        <div class="box">
            <a href="" class="logo"><img src="./img/logo.png"></a>
            <div class="box2">
                <div class="box3">
                    <p class="zi">搜索所有商品</p>
                </div>
                <a href="" class="like"><img src="./img/search-btn.png" alt=""></a>
            </div>
            
            <a href="./cart.html" class="cle">购物车</a>
           
            <div class="r">
                <p>订购热线</p>
                <h2>400-9993-513</h2> 
                <p>温馨提示:请您核对无误后拨出,谢谢!</p>
            </div>
        </div>
    </div>

    <div class="nav">
        <div class="nav2">
            <div class="qb">全部商品分类</div>
            <ul class="list">
                <li><a href="index.html">首页</a></li>
                <li><a href="list.html">金骏眉</a></li>
                <li><a href="list.html">大红袍</a></li>
                <li><a href="list.html">铁观音</a></li>
                <li><a href="list.html">龙井</a></li>
                <li><a href="list.html">茶具</a></li>
                <li><a href="list.html">茶师亲制</a></li>
                <li><a href="list.html">茶币商城</a></li>
                <li><a href="list.html">词条部落</a></li>
            </ul>
        </div>
    </div>



    <div class="cont">
        <div class="cont1">
            <div class="on1">
                <div class="on2">
                    <img src="./img/0017170_0.jpeg" alt="">
                    <span></span>
                </div>
                <div class="on_wk">
                    <img src="./img/0017170_0.jpeg" alt="">
                </div>
                <ul class="on3">
                    <li><img src="./img/0017170_0.jpeg" alt=""></li>
                    <li><img src="./img/0093503_0.jpeg" alt=""></li>
                    <li><img src="./img/0126733_0.jpeg" alt=""></li>
                </ul>
            </div>
            <div class="on4">
                <div class="on5">
                    <h1>茶叶</h1>
                </div>
                <div class="on6">
                    <span class="cq">茶七价</span>
                    <span class="scj"><span class="fh">￥</span>88</span>
                </div>
                <div class="on7">
                    <p  class="gk">
                        顾客评分 : &nbsp;
                        <span class="xx">
                            <img src="./img/star-small.png" alt="">
                            <img src="./img/star-small.png" alt="">
                            <img src="./img/star-small.png" alt="">
                            <img src="./img/star-small.png" alt="">
                            <img src="./img/star-small.png" alt="">
                        </span>&nbsp;
                        <span class="fen">5.0分</span>&nbsp;
                        <span class="pj">（已有31人评价）</span>
                    </p>
                    <p class="fx">
                        <span><img src="./img/teacur.png" alt=""></span>
                        &nbsp;
                        <span class="fx_wk2">购买立即返<span class="fx_wk1">22</span>茶币</span>
                    </p>

                    <div class="putin">
                        加入购物车
                    </div>
                </div>
            </div>
        </div>
        <div class="cont2">
            <div class="ct1">
                <span>看了又看 </span>
                <span class="iconfont3 icon-refresh"></span>
            </div>
            <div class="ct2">
                <span><img src="./img/0013997_0.jpeg" alt="" id="img1"></span>
                <span><img src="./img/0012655_0.jpeg" alt="" id="img2"></span>
                <span><img src="./img/0007690_0.jpeg" alt="" id="img3"></span>
            </div>
        </div>
    </div>


    <div class="goot_wk">
        <div class="foot">
            <div class="foot1">
                <ul class="foot_wk">
                    <li>关于我们 <span> / </span> &nbsp;</li>
                    <li> 配送政策 <span> / </span> &nbsp;</li>
                    <li> 招才纳贤 <span> / </span> &nbsp;</li>
                    <li> 帮助中心 <span> / </span> &nbsp;</li>
                    <li> 联系我们 <span> / </span> &nbsp;</li>
                    <li> 招商加盟 <span> / </span> &nbsp;</li>
                    <li> 网站地图 <span> / </span> &nbsp;</li>
                    <li> 词条部落</li>
                </ul><br>
                <p>Copyright 2016, 茶七网 TEA7.COM</p>
                <p>增值电信业务经营许可证 : B1.B2-20160011 &nbsp;&nbsp;&nbsp; 闽CP备14011677号-2</p>
                <p>服务时间 : 08:30-21:00 &nbsp;客服热线:400-9993-513（温馨提示 : 请您核对无误后拨出，谢谢！）</p>
                <span><img src="https://rr.knet.cn/static/images/logo/cnnic.png" alt=""></span>
                <span><img src="./img/cert.png" alt=""></span>
            </div>
            <div class="foot2">
                <div class="bos2">
                    <img src="./img/guanzhu_weixin_90.jpg" class="imgbos2">
                    <p><img src="./img/weixin.png" class="imgbos1"></p>
                    <p class="imgbos3">扫描关注微信公众号</p>
                </div>
                <div class="bos2">
                    <img src="./img/erweima.jpg" class="imgbos2">
                    <p class="imgbos4">APP</p>
                    <p class="imgbos3">扫描关注微信公众号</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script>
    class index{
        constructor(){
            this.dl = document.querySelector(".dl");
            this.zc = document.querySelector(".zc");
            this.welcome = document.querySelector(".welcome");
            this.logout = document.querySelector(".logout");
            this.uName = document.querySelector(".username")

            this.init();
            this.addevent();
        }

        init(){
            this.m = sessionStorage.getItem("usermsg");
            this.m = this.m ? JSON.parse(this.m) : {};
            if(this.m.user){
                this.uName.innerHTML = this.m.user;
                this.dl.style.display = "none";
                this.zc.style.display = "none";
                this.welcome.style.display = "block";
            }
        }
        addevent(){
            this.logout.onclick = function(){
                sessionStorage.removeItem("usermsg");
                location.reload();
            }
        }
    }

    new index;





    // --------------------------------------------

    class Details{
        constructor(){
            this.cont = document.querySelector(".cont1");
            this.url = "http://localhost/茶七网/project/js/goods.json";

            this.load();
            this.getId();
        }
        getId(){
            this.id = location.search.slice(1).split("=")[1];
        }
        load(){
            console.log(this.res)
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            this.res.forEach(val => {
                if(val.goodsId === this.id){
                    console.log(val);
                    this.cont.innerHTML = "00000000000";
                    this.cont.innerHTML = `
                    <div class="on1">
                        <div class="on2">
                            <img src="${val.pic.largeImg[0]}" alt="">
                            <span></span>
                        </div>
                        <div class="on_wk">
                            <img src="${val.pic.largeImg[0]}" alt="">
                        </div>
                        <ul class="on3">
                            ${this.createLi(val.img.smallImg)}
                        </ul>
                    </div>
                    <div class="on4">
                        <div class="on5">
                            <h1>${val.name}</h1>
                        </div>
                        <div class="on6">
                            <span class="cq">茶七价</span>
                            <span class="scj"><span class="fh">￥</span>${val.price}</span>
                        </div>
                        <div class="on7">
                            <p  class="gk">
                                顾客评分 : &nbsp;
                                <span class="xx">
                                    <img src="./img/star-small.png" alt="">
                                    <img src="./img/star-small.png" alt="">
                                    <img src="./img/star-small.png" alt="">
                                    <img src="./img/star-small.png" alt="">
                                    <img src="./img/star-small.png" alt="">
                                </span>&nbsp;
                                <span class="fen">5.0分</span>&nbsp;
                                <span class="pj">（已有31人评价）</span>
                            </p>
                            <p class="fx">
                                <span><img src="./img/teacur.png" alt=""></span>
                                &nbsp;
                                <span class="fx_wk2">购买立即返<span class="fx_wk1">22</span>茶币</span>
                            </p>

                            <div class="putin">
                                加入购物车
                            </div>
                        </div>
                    </div>`;

                    new Large(val.pic);
                }
            });
        }
        createLi(arr){
            let str = "";
            for(let i=0;i<arr.length;i++){
                str += `<li><img src="${arr[i]}" alt=""></li>`
            }
            return str;
        }
    }
    new Details;

    
    class Large{
        constructor(imgData){
            this.on2 = document.querySelector(".on2");
            this.onimg = document.querySelector(".on2 img");
            this.onspan = document.querySelector(".on2 span");
            this.on_wk = document.querySelector(".on_wk");
            this.on_wkimg = document.querySelector(".on_wk img");
            this.onli = document.querySelectorAll(".on3 li");

            this.imgData = imgData;
            
            this.addEvent();
        }
        addEvent(){
            var that = this;
            this.on2.onmouseover = function(){
                that.over();
            }
            this.on2.onmousemove = function(eve){
                var e = eve || window.event;
                that.move(e);
            }
            this.on2.onmouseout = function(){
                that.out();
            }
            for(let i=0;i<this.onli.length;i++){
                this.onli[i].onclick = function(){
                    that.onimg.src = this.children[0].src;
                    that.on_wkimg.src = this.children[0].src;
                }
            }
        }
        over(){
            this.onspan.style.display = "block";
            this.on_wk.style.display = "block";
        }
        move(e){
            var l = e.offsetX - this.onspan.offsetWidth;
            var t = e.offsetY - this.onspan.offsetHeight;
            if(l<0) l=0;
            if(t<0) t=0;
            if(l > this.on2.offsetWidth - this.onspan.offsetWidth){
                l = this.on2.offsetWidth - this.onspan.offsetWidth;
            }
            if(t > this.on2.offsetHeight - this.onspan.offsetHeight){
                t = this.on2.offsetHeight - this.onspan.offsetHeight;
            }
            this.onspan.style.left = l + "px";
            this.onspan.style.top = t + "px";
            var x = l / (this.on2.offsetWidth - this.onspan.offsetWidth);
            var y = t / (this.on2.offsetHeight - this.onspan.offsetHeight);
            this.on_wkimg.style.left = (this.on_wk.offsetWidth - this.on_wkimg.offsetWidth) * x + "px";
            this.on_wkimg.style.top = (this.on_wk.offsetHeight - this.on_wkimg.offsetHeight) * y + "px";
        }
        out(){
            this.onspan.style.display = "none";
            this.on_wk.style.display = "none";
        }
    }

    new Large();
</script>